<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

const MeetingRoomRef=ref()
const MeetingRoom=reactive({
  id:'',
  name:'',
  number:'',
  facilities:'',
  location:'',
  capacity:'',
  notes:'',
  status:''
})
//搜索表单
const SearchMeetingRoom=reactive({
  name:'',
  number:'',
})
//表格数据
const tableData=ref([])
const tableDataRef=ref()
onMounted(()=>{
  getall()
  getallmeetingroomPage()
})
const getall = () => {
  request({
    url:'/systemdailyman/meetingroom/getall',
    method:'GET',
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
//查询按钮
const submitBtn = () => {
  getallmeetingroom()
}
const getallmeetingroom=()=>{
  request({
    url:'/systemdailyman/meetingroom/getallMeetingRoom',
    method:'GET',
    params:SearchMeetingRoom,
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
const getallmeetingroomPage=()=>{
  request({
    url:'/systemdailyman/meetingroom/getall',
    method:'GET',
    params:pageSubFormModel,
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  currentPage : '',
  pages : ''
})
//分页--------------------------------------------------
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  getallmeetingroomPage()
}
//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
})
const handleCurrentChange = (val) => {
  pageSubFormModel.currentPage=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  getallmeetingroomPage()
}
//表单规则校验
const MeetingRoomRules= reactive({
  name:[
    { required: true, message: '请输入会议室名称', trigger: 'blur' },
    {max:10,message:'会议室名称不超过10个字符',trigger:'blur'},

  ],
  number:[
    { required: true, message: '请输入会议室编号', trigger: 'blur' },
    {max:10,message:'会议室编号不超过10个字符',trigger:'blur'}
  ],
  facilities:[
    {max:50,message:'特殊设施说明不超过50个字符',trigger:'blur'}
  ],
  location:[
    { required: true, message: '请输入会议室位置', trigger: 'blur' },
    {max:10,message:'会议室位置不超过10个字符',trigger:'blur'}
  ],
  capacity:[
    { required: true, message: '请输入最大容纳总数', trigger: 'blur' },

  ],
  notes:[
    {max:50,message:'备注不超过50个字符',trigger:'blur'}
  ]
})
const AddMeetingRules = reactive({
  name:[
    { required: true, message: '请输入会议室名称', trigger: 'blur' },
    {max:10,message:'会议室名称不超过10个字符',trigger:'blur'},

  ],
  number:[
    { required: true, message: '请输入会议室编号', trigger: 'blur' },
    {max:10,message:'会议室编号不超过10个字符',trigger:'blur'}
  ],
  facilities:[
    {max:50,message:'特殊设施说明不超过50个字符',trigger:'blur'}
  ],
  location:[
    { required: true, message: '请输入会议室位置', trigger: 'blur' },
    {max:10,message:'会议室位置不超过10个字符',trigger:'blur'}
  ],
  capacity:[
    { required: true, message: '请输入最大容纳总数', trigger: 'blur' },

  ],
  notes:[
    {max:50,message:'备注不超过50个字符',trigger:'blur'}
  ]
})
//表单新增弹框按钮
const addBtn=ref(false)
const AddMeeting=reactive({
  name:'',
  number:'',
  facilities:'',
  location:'',
  capacity:'',
  notes:'',
  status:''
})

const AddMeetingRef=ref()

//新增会议室确定按钮
const AddSubmit = () => {
  MeetingRoomRef.value.validate((valid,fields)=> {
    if (valid) {
      request({
        url:'/systemdailyman/meetingroom/isexistmeetingroom',
        method:'GET',
        params:AddMeeting
      }).then(req=>{
        if (200==req.data.errorCode){
          ElMessage({
            type: 'error',
            message:'会议室名称不能重复！'
          })
        }else {
        request({
            url:'http://localhost:8092/systemdailyman/meetingroom/addmeetingroom',
            method:'PUT',
            data:AddMeeting,
            headers:{'content-type':"application/json;charset:UTF-8"}
          }).then(req=>{
            if (200==req.data.errorCode) {
              ElMessage({
                type: 'success',
                message: '新增成功！'
              })
              addBtn.value=false
              AddMeetingRef.value.resetFields()
            }else {
              ElMessage({
                type: 'error',
                message: '新增失败！'
              })
            }
            getallmeetingroom()
          })
        }
      })
    }
  })
}
const meetingEdit=ref(false)
//操作列表修改按钮
const UpdateBtn = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  MeetingRoom.id=rowData.id
  MeetingRoom.name=rowData.name
  MeetingRoom.number=rowData.number
  MeetingRoom.facilities=rowData.facilities
  MeetingRoom.capacity=rowData.capacity
  MeetingRoom.location=rowData.location
  MeetingRoom.notes=rowData.notes

  meetingEdit.value=true
}

//修改信息确认按钮
const updateSubBtn = () => {
  MeetingRoomRef.value.validate((valid,fields)=> {
    if (valid) {
      request({
        url:'http://localhost:8092/systemdailyman/meetingroom/updatemeetingroom',
        method:'put',
        data:MeetingRoom,
        headers:{'content-type':"application/json;charset:UTF-8"}
      }).then(req=>{
        ElMessage({
          type: 'success',
          message: '修改成功！'
        })
        meetingEdit.value=false
        getallmeetingroom()
      })
    }
  })
}
//删除信息按钮
const DeleteBtn=(rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  MeetingRoom.id = rowData.id

  ElMessageBox.confirm(
      '确定要删除此条信息吗？',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )  .then(() => {
    request({
      url:'http://localhost:8092/systemdailyman/meetingroom/deletemeetingroom/'+rowData.id,
      method:'delete'
    }).then(req=>{
      ElMessage({
        type: 'success',
        message: '确认删除',
      })
      getallmeetingroom()
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//会议室状态按钮
const changeSwitch=(rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  MeetingRoom.id=rowData.id
  MeetingRoom.status=rowData.status
  request({
    url:'http://localhost:8092/systemdailyman/meetingroom/updatestutas',
    method:'put',
    data:MeetingRoom,
    headers:{'content-type':"application/json;charset:UTF-8"}
  }).then(req=>{
    ElMessage({
      type: 'success',
      message: '修改成功！'
    })
    getallmeetingroom()
  })
}
</script>

<template>
  <div class="bg">
    <el-form
        ref="MeetingRoomRef"
        :model="SearchMeetingRoom"
    >
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item prop="name" label="会议室名称">
            <el-input v-model="SearchMeetingRoom.name"  style="width: 180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" >
          <el-form-item prop="number" label="会议室编号">
            <el-input v-model="SearchMeetingRoom.number"  style="width: 180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button @click="submitBtn" type="primary">查询</el-button>
          <el-button @click="addBtn=true" type="primary">新增分组</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" ref="tableDataRef" stripe border style="height: 100%;width:980px" :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="id" label="编号" width="80"  v-if="false"/>
      <el-table-column prop="name" label="会议室名称" width="100"/>
      <el-table-column prop="number" label="会议室编号" width="100"/>
      <el-table-column prop="facilities" label="特殊设备说明" width="150"/>
      <el-table-column prop="location" label="会议室位置" width="100"/>
      <el-table-column prop="capacity" label="容纳总数" width="100"/>
      <el-table-column prop="notes" label="备注" width="100"/>
      <el-table-column prop="status" label="会议室状态" width="150">
        <template #default="scope">
        <el-switch v-model="scope.row.status" active-text="启用" inactive-text="停用"
                   :active-value="0"
                   :inactive-value="1"
                    @change="changeSwitch($event,scope.row,scope.$index)">
        </el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="180">
        <template #default="scope">
        <el-button @click="UpdateBtn(scope.$index, scope.row)" size="small" type="primary">修改</el-button>
        <el-button @click="DeleteBtn(scope.$index, scope.row)" size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination background
                   size="large"
                   style="margin-top: 30px;margin-left: 15%;"
                   v-model:current-page="pageFormModel.currentPage"
                   v-model:page-size="pageFormModel.size"
                   :page-sizes="[ 10 ]"
                   :disabled="disabled"
                   :background="background"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total=pageFormModel.total
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog
      v-model="addBtn"
      title="新增会议室"
      width="500"
  >
    <el-form
        ref="AddMeetingRef"
        :model="AddMeeting"
        :rules="AddMeetingRules"
        label-width="auto"
        style="margin-left: 15%"
    >
      <el-form-item prop="name" label="会议室名称" placeholder="请输入会议室名称">
        <el-input v-model="AddMeeting.name"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="number" label="会议室编号" placeholder="请输入会议室编号">
        <el-input v-model="AddMeeting.number"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="facilities" label="特殊设施说明" placeholder="请输入特殊设施说明">
        <el-input v-model="AddMeeting.facilities" type="textarea" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="location" label="会议室位置" placeholder="请输入会议室位置">
        <el-input v-model="AddMeeting.location"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="capacity" label="容纳总数" placeholder="请输入容纳总数">
        <el-input v-model="AddMeeting.capacity"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="notes" label="备注" placeholder="请输入备注">
        <el-input v-model="AddMeeting.notes" type="textarea" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-button type="primary" @click="AddSubmit" >提交</el-button>
    </el-form>
  </el-dialog>
  <el-dialog
      v-model="meetingEdit"
      title="修改会议室信息"
      width="500"
  >
    <el-form ref="MeetingRoomRef"
             :model="MeetingRoom"
             label-width="auto"
             :rules="MeetingRoomRules">
      <el-form-item prop="id" >
        <el-input v-model="MeetingRoom.id" type="hidden"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="会议室名称" >
        <el-input v-model="MeetingRoom.name"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="number" label="会议室编号" >
        <el-input v-model="MeetingRoom.number"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="facilities" label="特殊设施说明" >
        <el-input v-model="MeetingRoom.facilities" type="textarea" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="location" label="会议室位置" >
        <el-input v-model="MeetingRoom.location"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="capacity" label="容纳总数" >
        <el-input v-model="MeetingRoom.capacity"  style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="notes" label="备注" >
        <el-input v-model="MeetingRoom.notes" type="textarea" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-button @click="updateSubBtn">提交</el-button>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.bg{
  width: 1100px;
  margin-top: 50px;
  margin-left: 5%;
}
</style>